<template>
  <div class="editor" ref="editor"></div>
</template>
<!---->
<script setup lang="ts">
import '@/editor/theme/common/style.css'
import '@/editor/theme/nord/style.css'
import { Crepe } from '@/editor'
import container from '@/editor/feature/container'
import { remarkMarkColor } from '@/editor/feature/marker/remark-mark-color.ts'
import defaultMd from '@/views/DefaultMd.ts'
import { $remark } from '@milkdown/kit/utils'
import { onMounted, onUnmounted, useTemplateRef } from 'vue'

const milkdownMarkColorPlugin = $remark('markColor', () => remarkMarkColor)
const editorEl = useTemplateRef('editor')
let crepe: Crepe
onMounted(() => {
  crepe = new Crepe({
    root: editorEl.value,
    defaultValue: defaultMd,
  })
  crepe.editor.use(container)
  // crepe.editor.use(milkdownMarkColorPlugin).use(markSchema)
  crepe.create()
})
onUnmounted(() => {
  crepe?.destroy()
})
</script>

<style>
.editor {
  height: auto;
  min-height: 500px;
  border: 1px solid red;
}

table tr[data-is-header='true'] {
  background-color: silver;
}

.cm-panel.cm-search button[name='close'] {
  font-size: 24px !important;
  background-color: red;
}
</style>
